html {
    /* height: 100%; */
    /* width: 100%; */
}

body {
    text-align: center;
    background: url(../webImgs/bg18.jpg);
    /* background-repeat: no-repeat; */
    /* height: auto; */
    /* background-size: 100%; */
}

.divbody {
    background-color: rgba(250, 250, 210, 0.9);
    margin: auto auto;
    padding-top: 10px;
    padding-bottom: 15px;
    /*width: 60%;*/
    height: auto;
}

.head_link{
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.link{
    float: right;
    display: block;
    margin-right: 20px;
    text-decoration: none;
    color: #8B864E;
}

.plant_name {
    /* margin-top: 40px; */
    /* float: left; */
    /* border:2px white solid; */
    stroke: ivory;
    stroke-width: 10px;
    fill: transparent;
    /* text-shadow:rgba(250, 250, 210, 0.9); */
    /* border: ivory solid 2px; */
    font-weight: bold;
}

.plant_imgs {
    margin: auto auto;
    margin-top: 30px;
    display: inline-block;
    /* width: 60%; */
}

img {
    border: 8px solid white;
    border-radius: 4px;
}

.group {
    display: table-cell;
    /* border: 1px solid red; */
}

.set_button {
    display: block;/*使图片在上按钮在下*/
    margin:auto auto;
    margin-top: 10px;
    border-radius: 5px;
    background-color: rgba(220, 248, 94, 0.9);
}
#button_group{
    /*display: inline-block;*/
    margin-left: 0px;
}
#left{
    float: left;
    margin-left:30px;
}
#right{
    float: right;
    margin-left: 15px;
    margin-right: 20px;
}

.set_button :hover{
    cursor: pointer;
}

.plant_intro {
    text-align: left;
    margin: auto auto;
    margin-top: 30px;
    width: 90%;
}

p {
    line-height: 25px;
}

@media only screen and (max-width: 500px) {
    .divbody{
        width: 90%;
    }
    #button_group{
        display: inline-block;
    }
    #left,#right{
        float: none;
    }
    #left{
        margin-left: 15px;
    }
    .plant_imgs {
        /* margin-top: 30px; */
        width: 90%;
    }
    img {
        width: 60px;
        height: 60px;
        margin-left: 5px;
    }
    img:hover {
        width: 80px;
        height: 80px;
    }
    .plant_intro {
        width: 90%;
    }
    h2 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 490px) and (max-width: 850px) {
    .divbody{
        width: 80%;
    }
    #button_group{
        display: inline-block;
    }
    .plant_imgs {
        /* margin-top: 30px; */
        width: 80%;
    }
    img {
        width: 80px;
        height: 80px;
        margin-left: 10px;
    }
    img:hover {
        width: 100px;
        height: 100px;
    }
    .plant_intro {
        width: 80%;
    }
    h2 {
        font-size: 20px;
    }
}

@media only screen and (min-width: 850px) {
    .divbody{
        width: 60%;
    }
    img {
        width: 130px;
        height: 130px;
        margin-left: 20px;
    }
    img:hover {
        width: 170px;
        height: 170px;
    }
}